
<template>
    <div :style="styles" id="myChart1" class="echar_d1"></div>
</template>
    
<script>
import * as echarts from "echarts/core"
import { BarChart, PieChart } from "echarts/charts"
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DatasetComponent } from "echarts/components"
import { CanvasRenderer } from "echarts/renderers"
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    PieChart,
    LegendComponent,
    DatasetComponent,
    CanvasRenderer,
])
export default {
    name: "ChartBar1",
    components: {},
    props: {
        styles: {
            default: { width: "400px", height: "400px" },
        },
        // bottomList: {
        //     default: []
        // },
        countList: {
            default: [13, 20, 5, 15, 11],
        },
    },
    data() {
        return {
            bottomList: [
                this.$t("text.HomeView.l24"),
                this.$t("text.HomeView.l25"),
                this.$t("text.HomeView.l26"),
                this.$t("text.HomeView.l27"),
                this.$t("text.HomeView.l28"),
            ],
        }
    },
    mounted() {
        this.draw()
    },
    methods: {
        draw() {
            let myChart = echarts.init(document.getElementById("myChart1"))
            myChart.setOption({
                tooltip: {},
                grid: {
                    // left: "2%",
                    // right:"2%",
                    bottom: "10%",
                },
                xAxis: {
                    data: this.bottomList,
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        type: "dashed",
                        color: "#fff",
                    },
                },
                yAxis: {},
                series: [
                    {
                        name: "数量",
                        type: "bar",
                        data: this.countList,
                        itemStyle: {
                            borderRadius: 50,
                            color: "#a4baff",
                            borderWidth: 2,
                        },
                        barWidth: "15%",
                    },
                ],
            })
        },
    },
    watch: {},
    computed: {},
}
</script>
    
<style scoped>

</style>